<template>
	<view>
		<view class="product-card" v-for="(item, index) in ongoingProductList" :key="index">
			<view style="display: flex;">
				<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
				<view class="card_right">
					<view @click="toDetails(item)"
						style="display: flex;justify-content: space-between;align-items: center;">
						<view class="u-line-1" style="font-weight: bold;font-size: 32rpx;">
							<span v-if="item.brandName">[{{item.brandName}}]</span>{{item.name}}<text
								style="margin: 0 10rpx;">{{item.sku}}</text>
						</view>

						<uni-icons type="forward" size="15" color="#000"></uni-icons>
					</view>

					<view style="display: flex;font-size: 28rpx;color: #999;margin:20rpx 0 10rpx 0;">
						{{item.operateCityName}}
					</view>

					<view
						style="display: flex;font-size: 26rpx;color: #999;margin: 0 0 12rpx 0;justify-content: space-between;align-items: center;">
						<view><text style="color: #000;font-weight: bold;">￥{{item.activityPrice}}</text><text
								style="margin-left: 10rpx;text-decoration: line-through;">￥{{item.price}}</text></view>
						<button v-if="currentInd == 0"
							style="font-size: 24rpx; line-height: 46rpx;padding:0 20rpx;color: #fff;" class="bg_color"
							@click="activityCategory == 2 ?deleteEnrolledPro(item):changeActive(item)">{{activityCategory == 2 ? '取消':'修改'}}</button>
					</view>
				</view>
			</view>
			<view style="border: 1rpx solid #f2f2f2;margin: 8rpx 0;"></view>
			<view v-if="currentInd == 0" style="display: flex;justify-content: space-between;margin: 20rpx 0;">
				<view class="sales-volume">
					<text style="color:#999">销量(活动期)</text>
					<span style="margin-left: 10rpx;">{{item.salesVolume}}</span>
				</view>
				<view class="sales-volume">
					<text style="color:#999">剩余活动库存</text>
					<span style="margin-left: 10rpx;">{{item.inventory}}</span>
				</view>
			</view>
			<!-- 显示未生效原因 -->
			<view v-if="currentInd == 1" style="display: flex; margin: 20rpx 0;">
				<text style="color: #999; flex: 1;">未生效原因</text>
				<view style="margin-left: 10rpx;" @click="toggleShowReason(item.ineffectiveReason)">
				  <text class="ellipsis">{{ item.ineffectiveReason }}</text>
				</view>
			</view>

			<!-- 模态框 -->
			<view v-if="showReasonModal" class="modal-overlay">
				<view class="modal-content">
				  <view class="modal-header">
					<text>未生效原因</text>
				  </view>
				  <view class="modal-body">
					<text>{{ currentReason }}</text>
				  </view>
				  <view class="modal-footer">
					<button @click="closeReasonModal">关闭</button>
				  </view>
				</view>
			</view>
		</view>
			<view class='noCommodity' v-if="ongoingProductList.length == 0 ">
				<view class='pictrue'>
					<image src='../static/noCollect.png'></image>
				</view>
				<text class="text-ccc" style="font-weight: bolder;">暂无信息</text>
			</view>
	</view>
</template>  

<script>
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		props: {
			tab: {
				type: [Object],
				default: ''
			},
			parentId: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: 'blue'
			},
			currentInd: {
				type: Number,
				default: 0,
			},
			ongoingProductList: {
				type: Array,
				default: null
			},
			activityCategory: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				theme: app.globalData.theme,
				scrollable: true,
				showReasonModal: false,
				currentReason: '',
				dataList: [{
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '红壳鲜鸡蛋',
					skuName: '中码 30斤',
					hotNum: 2,
				}, {
					brandName: '金龙鱼',
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '雪花小麦小麦粉八星',
					skuName: '25kg',
					hotNum: 3,
				}, {
					brandName: '金龙鱼',
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '雪花小麦小麦粉八星',
					skuName: '25kg',
					hotNum: 3,
				}, {
					brandName: '金龙鱼',
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '雪花小麦小麦粉八星',
					skuName: '25kg',
					hotNum: 3,
				}],
				refreshing: false,
				refreshText: "",
				refreshFlag: false,
				// ----------------------
				productLoading: false,
				productParam: {
					current: 1,
					size: 10,
					// cateId: "",
					// keywords: "",
					// type: 1,
				},
				totalPage: 1, //总页面数量
				loadMoreStatus: 'more', // 底部状态 noMore loading
				// 审核状态
				auditStatusObj: {
					0: '审核中',
					1: '审核成功',
					2: '审核失败',
					3: '无需审核',
				},
				// 审核状态颜色
				auditStatusStyle: {
					0: 'orange',
					1: 'green',
					2: 'red',
					3: 'blue',
				},
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.productParam.current = 1;
				this.loadMoreStatus = 'more';
				//需要初始化商品列表数据，根据数据类型
				this.productParam.type = this.tab.type;

				// this.getProductList();
				this.loadMoreStatus = 'noMore';
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.productParam.current++;
				this.getProductList(true);
			},
			toDetails(item) {
				this.$emit('toDetails', item);
			},
			changeActive(item) {
				this.$emit('changeActive', item);
			},
			showInfoModal(index, product) {
				this.$emit('showInfoModal', {
					index: index,
					product: product
				});
			},
			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				this.dataList.length = 0;
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}

				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
			//打开更多
			button4Click(item) {
				// 打开模态框
				this.$emit('openMoreSetting', item);
			},
			// 搜索
			searchProduct(valueKey) {
				this.productParam.current = 1;
				this.productParam.keywords = valueKey;
				this.loadMoreStatus = 'more';
				this.getProductList();
				this.productLstTwoList();
			},
			// 按时间顺序查询 0正序,1倒序
			timeTypeProduct(valueType) {
				this.productParam.current = 1;
				this.productParam.timeSort = valueType;
				this.loadMoreStatus = 'more';
				this.getProductList();
				this.productLstTwoList();
			},
			showToast(type, message) {
				this.$refs.uToast.show({
					type: type,
					message,
					message,
					complete() {}
				})
			},

			//-------------------------------api
			//加载 商品列表
			getProductList(isMerge) {
				let that = this;
				this.productLoading = true;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				productLstApi(this.productParam).then(res => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.records, that.dataList);
					} else {
						that.dataList = data.records;
					}
					that.totalPage = data.pages;
					if (data.pages == this.productParam.current || data.pages == 0) {
						that.loadMoreStatus = 'noMore';
					}
					that.productLoading = false;
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					console.log("productHeadersApi error", err)
				});
			},
			/* 取消活动 */
			deleteEnrolledPro(item) {
				this.$emit('deleteEnrolledPro', item);
			},
			//显示全部未生效原因
			toggleShowReason(reason) {
			  this.currentReason = reason;
			  this.showReasonModal = true;
			},
			closeReasonModal() {
			  this.showReasonModal = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.list {
		background-color: $main-background-color;
	}

	.card_right {
		display: flex;
		flex-flow: column;
		flex: 1;
		margin: 6px 6px 0 6px;

		.u-line {
			display: -webkit-box !important;
			/* overflow: hidden; */
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical !important;
			font-size: 32rpx;
			font-weight: bold;
		}

		// 客户热度
		.class-hot {
			font-size: 24rpx;
			margin: 13rpx 0;
			color: #999;
			display: flex;
			align-items: center;
		}
	}


	.product-card {
		background-color: #fafafa;
		border-radius: 18rpx;
		margin: 20rpx 0;
		padding: 20rpx;
	}

	.noCommodity {
		margin-top: 30%;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
	.ellipsis {
	  display: inline-block;
	  max-width: 400rpx; /* 根据需要调整最大宽度 */
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  cursor: pointer;
	}
	.ellipsis {
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  // background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 10000;
	}
	.modal-content {
	  background-color: white;
	  padding: 20px;
	  border-radius: 10px;
	  width: 80%;
	  max-width: 400px;
	  text-align: center;
	}
	
	.modal-header, .modal-footer {
	  margin-bottom: 10px;
	}
	
	.modal-body {
	  margin-bottom: 20px;
	}
</style>